<template>

  <div class="dashboard-container">
      <div class="app-container">
        <!-- 组题列表 -->
        <el-card shadow="never" >
            <el-form :inline="true" :model="randomsData" class="demo-form-inline" ref="ruleForm">
            <el-form-item label="关键字">
              <el-input  v-model="randomsData.keyword" placeholder="根据编号搜索"  @keyup.enter.native="onSubmit"></el-input>
            </el-form-item>
            <el-form-item style="float:right">
              <el-button @click="clear"  >清除</el-button>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
            </el-form>
            <div style="margin-bottom: 15px; background-color: #f4f4f5; color: #909399; height:40px line-height:18px">
              <i class="el-alert__icon el-icon-info" style="padding:12px"></i>
              <span style="margin-left:15px">数据一共{{total}}条</span>
            </div>
            <el-table :data="randoms"
                      style="width: 100%">
            <el-table-column prop="id" label="编号" width="220"></el-table-column>
            <el-table-column prop="questionType"
                            label="题型" width="80"
                            :formatter="formatterQuestionType">
            </el-table-column>
            <el-table-column prop="questionIDs" label="题目编号" width="220" :formatter="dataFn">
              <template slot-scope="{row}">
                <!-- {{ row }} -->
                <div v-for="itme in row.questionIDs" :key="itme.number" style="color:blue" >
                  <el-link type="primary" :underline="false" @click="preview(itme)">{{itme.number}}</el-link>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="addTime" label="录入时间" width="180">
              <template slot-scope="scope">
                {{scope.row.addTime|dateFormat}}
              </template>
            </el-table-column>
            <el-table-column prop="totalSeconds" label="答题时间(s)" width="295"></el-table-column>
            <el-table-column prop="accuracyRate" label="正确率(%)" width="290"></el-table-column>
            <el-table-column prop="userName" label="录入人" width="250"></el-table-column>
            <el-table-column fixed="right" label="操作" width="80">
              <template slot-scope="{row}">
                <el-button icon="el-icon-delete" circle @click.native="delQuestion(row)"></el-button>
              </template>
            </el-table-column>
            </el-table>
            <div class="block" style="margin-top: 20px; text-align: right;" >
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="randomsData.page"
                :page-size="randomsData.pagesize"
                layout=" sizes, prev, pager, next, jumper"
                :page-sizes="[20, 30, 50, 100]"
                :total="total">
              </el-pagination>
            </div>
        </el-card>
        <!-- 查看弹窗 -->
        <PreviewDialog :showDialog.sync="showDialog" :QuestionDetail="QuestionDetail"/>
      </div>
    </div>

  </template>
<script>
import { randoms, removeRandoms,detail } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
import PreviewDialog from '@/components/PreviewDialog'
export default {
  name: 'QuestionsRandoms',
  components: {
      PreviewDialog
    },
  data () {
    return {
      randomsData: {
        page: 1,
        pagesize: 20,
        keyword: '',
      },
      showDialog: false,
      Name: '',
      state: '',
      total: 0,
      randoms: [],
      counts: null,
      QuestionDetail:{}//基础数据详情
    }
  },
  created () {
    this.getRandoms(this.randomsData)
  },
  computed: {

  },
  methods: {
    click () {

    },
    dataFn (row, column, cellValue, index) {
      console.log(cellValue)
    },
    // 列表数据
    async getRandoms (randomsData) {
      const { data } = await randoms(randomsData)
      console.log(data)
      this.randoms = data.items
      this.total = data.counts
    },

    // 分页处理⭐
    handleSizeChange (val) {
      // console.log(每页 ${val} 条)
      this.randomsData.pagesize = val
      this.randomsData.page = 1
      this.getRandoms(this.randomsData)
    },
    handleCurrentChange (val) {
      console.log(val);
      this.randomsData.page = val
      this.getRandoms(this.randomsData)
    },

    // 搜索框⭐
    async onSubmit () {
      // console.log(this.data.id);
      // this.data.id = this.formInline.user
      this.getRandoms(this.randomsData)
    },
    // 清除按钮
    clear () {
      this.randomsData.keyword = ''
    },
    // 删除
    delQuestion (row) {
      console.log(row)
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id: row.id })
        this.$message.success('删除成功')
        this.getRandoms()
      })
        .catch(() => {})
    },
    // 题型
    formatterQuestionType (row, column, cellValue, index) {
      const res = questionType.find((itme) => itme.value === cellValue)
      if (res === '' || res === undefined) return
      return res.label
    },
    // 预览
    async preview(row) {
      console.log(row);
      const {data} = await detail(row)
      this.showDialog = true
      this.QuestionDetail=data
      console.log(this.QuestionDetail);
    }
  }
}
</script>

<style scoped></style>
